<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">
        <el-row style="margin-top: 20px">
          <el-col :span="24" style="font-size: 14px">{{form.name}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">地址：{{form.province}}{{form.city}}{{form.county}}{{form.address}}</el-col>
        </el-row>

        <el-container>
          <el-header>
            基本信息
            <el-button style="float:right;margin-top: 15px" size="mini" @click="changInfo(1)">修改</el-button>
          </el-header>
          <el-main>
            门店名称：{{form.name}}
            <div class="line"></div>
            店铺电话：{{form.shopPhone}}
            <div class="line"></div>
            店铺公告：{{form.announcement}}
            <div class="line"></div>
            <div style="overflow:hidden;">
              <div style="float:left;">店 铺 头 像 ：</div>
              <div class="img-box">
                <img v-if="form.imgKey" :src="IMGURL + form.imgKey" class="avatar">
              </div>
            </div>
            <!--<div class="line"></div>-->
            <!--<div style="overflow:hidden;">-->
              <!--<div style="float:left;">店铺二维码：</div>-->
              <!--<div style="width: 80px;height: 80px;background-color: #ccc;float:left;"></div>-->
            <!--</div>-->
          </el-main>
        </el-container>

        <el-container>
          <el-header>
            财务管理
            <el-button style="float:right;margin-top: 15px" size="mini" @click="changInfo(3)">修改</el-button>
          </el-header>
          <el-main>
            银行卡类型：<span v-if="bankInfo">{{bankInfo.bankName}}</span><span v-else>无</span>
            <div class="line"></div>
            持卡人姓名：<span v-if="bankInfo">{{bankInfo.cardUserName}}</span><span v-else>无</span>
            <div class="line"></div>
            银行卡号：<span v-if="bankInfo">{{bankInfo.cardNo}}</span><span v-else>无</span>
            <div class="line"></div>
          </el-main>
        </el-container>

        <el-container>
          <el-header>
            营业设置
            <el-button style="float:right;margin-top: 15px" size="mini" @click="changInfo(2)">修改</el-button>
          </el-header>
          <el-main>
            <el-form label-width="120px" class="store-form" size="small" disabled>
              <el-form-item label="订餐时间：">
                <el-input class="input" v-model="form.businessBeginTime"></el-input> -
                <el-input class="input"  v-model="form.businessEndTime"></el-input>
              </el-form-item>
              <el-form-item label="起送费：">
                <el-input class="input"  v-model="form.startingPrice"></el-input>
              </el-form-item>
              <el-form-item label="配送费：">
                <el-input class="input"  v-model="form.postalPrice"></el-input>
              </el-form-item>
              <el-form-item label="配送时长：">
                <el-input class="input"  v-model="form.estimatedTime"></el-input> 分钟
              </el-form-item>
              <!--<el-form-item label="非营业时间下单：">-->
                <!--<el-radio-group v-model="form.yy">-->
                  <!--<el-radio :label="3">支持</el-radio>-->
                  <!--<el-radio :label="6">不支持</el-radio>-->
                <!--</el-radio-group>-->
              <!--</el-form-item>-->
              <!--<el-form-item label="预订单时间范围：">-->
                <!--<el-slider-->
                  <!--style="width: 300px;"-->
                  <!--v-model="form.tt"-->
                  <!--:step="33.333"-->
                  <!--:show-tooltip="false"-->
                  <!--show-stops>-->
                <!--</el-slider>-->
                <!--<span>当天</span>-->
                <!--<span>明天</span>-->
                <!--<span>后天</span>-->
                <!--<span>三天</span>-->
              <!--</el-form-item>-->
              <!--<el-form-item label="预定单提醒时间：">-->
                <!--提前60分钟-->
              <!--</el-form-item>-->
            </el-form>
          </el-main>
        </el-container>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second"  disabled>
        <el-container>
          <el-header>
            营业执照
            <span style="margin-left: 20px">审核通过</span>
            <el-button style="float:right;margin-top: 15px" size="mini">修改</el-button>
          </el-header>
          <el-main>
            <el-form label-width="200px" class="store-form">
              <el-form-item label="图片：">

              </el-form-item>
              <el-form-item label="名称：">

              </el-form-item>
              <el-form-item label="法定代表人/经营者：">

              </el-form-item>
              <el-form-item label="营业执照注册号：">

              </el-form-item>
              <el-form-item label="地址：">

              </el-form-item>
              <el-form-item label="营业范围：">

              </el-form-item>
              <el-form-item label="营业执照有效期：">

              </el-form-item>
            </el-form>
          </el-main>
        </el-container>

        <el-container>
          <el-header>
            餐饮许可证
            <span style="margin-left: 20px">审核通过</span>
            <el-button style="float:right;margin-top: 15px" size="mini">修改</el-button>
          </el-header>
          <el-main>
            <el-form label-width="200px" class="store-form">
              <el-form-item label="图片：">

              </el-form-item>
              <el-form-item label="名称：">

              </el-form-item>
              <el-form-item label="法定代表人/经营者：">

              </el-form-item>
              <el-form-item label="营业执照注册号：">

              </el-form-item>
              <el-form-item label="地址：">

              </el-form-item>
              <el-form-item label="营业范围：">

              </el-form-item>
              <el-form-item label="营业执照有效期：">

              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
      </el-tab-pane>
      <el-tab-pane label="合同下载" name="third"  disabled>
        <el-table
          element-loading-text="Loading"
          highlight-current-row
          row-class-name="ele-table-row"
          :data="tableData"
          style="width: 100%">
          <el-table-column label="序号" width="60">
            <template slot-scope="scope">
              {{scope.$index + 1 + 10 * (page.page - 1)}}
            </template>
          </el-table-column>
          <el-table-column label="电子合同版本号" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <!--{{scope.row.}}-->
            </template>
          </el-table-column>
          <el-table-column label="状态" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <!--{{scope.row.}}-->
            </template>
          </el-table-column>
          <el-table-column label="生效时间" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <!--{{scope.row.}}-->
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button size="mini">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!---->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%">
      <el-form label-width="100px" size="small" :model="form" :rules="rule" ref="form" v-if="showIndex === 1">
        <el-form-item label="店铺电话" prop="shopPhone">
          <el-input class="input-w" v-model="form.shopPhone"></el-input>
        </el-form-item>
        <el-form-item label="店铺公告" prop="announcement">
          <el-input class="input-w" v-model="form.announcement"></el-input>
        </el-form-item>
        <el-form-item label="店铺头像" required>
          <el-upload
            accept="image/*"
            :action="uploadUrl"
            :headers="myHeaders"
            class="avatar-uploader"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.imgKey" :src="IMGURL + form.imgKey" class="avatar">
            <i class="el-icon-plus avatar-uploader-icon" v-else></i>
          </el-upload>
        </el-form-item>
      </el-form>
          <span slot="footer" class="dialog-footer">
           <el-button @click="hiddenBox">取 消</el-button>
          <el-button type="primary" @click="submitForm()">确 定</el-button>
         </span>
    </el-dialog>
    <!---->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible2"
      width="50%">
      <el-form label-width="100px" size="small" :model="form" :rules="rules" ref="formm" v-if="showIndex === 2">
        <el-form-item label="起送价"prop="startingPrice">
          <el-input-number v-model="form.startingPrice" controls-position="right" :min="0" class="input-w"></el-input-number>
        </el-form-item>
        <el-form-item label="配送费"prop="postalPrice">
          <el-input-number v-model="form.postalPrice" controls-position="right" :min="0" class="input-w"></el-input-number>
        </el-form-item>
        <el-form-item label="配送时长"prop="estimatedTime">
          <el-input-number v-model="form.estimatedTime" controls-position="right" :min="1" style="width: 100px;"></el-input-number> 分钟
        </el-form-item>
        <el-form-item label="配送时间"required>
          <el-time-select
            class="input-s"
            v-model="form.businessBeginTime"
            :picker-options="{
              start: '00:00',
              step: '00:15',
              end: '23:59'
            }"
            placeholder="选择时间">
          </el-time-select> -
          <el-time-select
            class="input-s"
            v-model="form.businessEndTime"
            :picker-options="{
              start: '00:00',
              step: '00:15',
              end: '23:59'
            }"
            placeholder="选择时间">
          </el-time-select>
        </el-form-item>
      </el-form>
    <span slot="footer" class="dialog-footer">
           <el-button @click="hiddenBox">取 消</el-button>
          <el-button type="primary" @click="submitForm()">确 定</el-button>
         </span>
    </el-dialog>
    <!---->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible3"
      width="50%">
      <el-form label-width="100px" size="small" :model="bankInfo" :rules="ruless" ref="formmm" v-if="showIndex === 3">
        <el-form-item label="所属银行" prop="bankName">
          <el-input class="input-w" v-model="bankInfo.bankName"></el-input>
        </el-form-item>
        <el-form-item label="持卡人姓名" prop="cardUserName">
          <el-input class="input-w" v-model="bankInfo.cardUserName"></el-input>
        </el-form-item>
        <el-form-item label="银行卡号" prop="cardNo">
          <el-input-number v-model="bankInfo.cardNo" controls-position="right" class="input-w"></el-input-number>
        </el-form-item>
      </el-form>
    <span slot="footer" class="dialog-footer">
           <el-button @click="hiddenBox">取 消</el-button>
          <el-button type="primary" @click="submitForm()">确 定</el-button>
         </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getToken } from '@/utils/auth'
  import { store_info, store_change, store_bank } from '@/api'
  import { page } from '@/mixins/page'
  import { UPLOADURL } from '@/utils/uploadurl'
  import { IMGURL } from '@/utils/imgurl'

  export default {
    mixins: [page],
    data() {
      return {
        dialogVisible3: false,
        dialogVisible2: false,
        imgKey: '',
        IMGURL: IMGURL,
        myHeaders: { Authorization: getToken() },
        uploadUrl: UPLOADURL,
        dialogVisible: false,
        activeName: 'first',
        form: {},
        rule: {
          shopPhone: [
            { required: true, message: '请输入店铺电话', trigger: 'blur' }
          ],
          announcement: [
            { required: true, message: '请输入店铺公告', trigger: 'blur' }
          ]
        },
        rules: {
          startingPrice: [
            { required: true, message: '请输入起送价', trigger: 'blur' }
          ],
          postalPrice: [
            { required: true, message: '请输入配送费', trigger: 'blur' }
          ],
          estimatedTime: [
            { required: true, message: '请输入配送时长', trigger: 'blur' }
          ]
        },
        ruless: {
          bankName: [
            { required: true, message: '请输入所属银行', trigger: 'blur' }
          ],
          cardUserName: [
            { required: true, message: '请输入持卡人姓名', trigger: 'blur' }
          ],
          cardNo: [
            { required: true, message: '请输入银行卡号', trigger: 'blur' }
          ]
        },
        tableData: [],
        imgs: [],
        maskFlag: '',
        showStart: '',
        coverImg: {},
        projectId: 0,
        showIndex: 0,
        bankInfo: {}
      }
    },
    methods: {
      handleAvatarSuccess(res, file) {
        console.log('--------------')
        console.log(res)
        this.form.imgKey = res.data
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isLt2M
      }, //
      handleClick(tab, event) {
        console.log(tab, event)
      },
      getInfo() {
        store_info().then(res => {
          console.log(res, 456)
          res.brand.estimatedTime = res.brand.estimatedTime / 1000 / 60
          this.form = res.brand
          console.log(this.form)
          if (!res.params) {
            this.bankInfo = res.params
          }
        })
      },
      changInfo(index) {
        if (index === 2) {
          this.dialogVisible2 = true
        } else if (index === 1) {
          this.dialogVisible = true
        } else if (index === 3) {
          this.bankInfo = {}
          this.dialogVisible3 = true
          console.log(this.bankInfo)
        }
        this.showIndex = index
      },
      hiddenBox() {
        this.dialogVisible = false
        this.dialogVisible2 = false
        this.dialogVisible3 = false
      },
      submitForm() {
        var formName
        if (this.showIndex === 1) {
          formName = 'form'
        } else if (this.showIndex === 2) {
          formName = 'formm'
        } else if (this.showIndex === 3) {
          formName = 'formmm'
        }
        if (this.form.estimatedTime > 120) {
          this.$message({ type: 'warning', message: '配送时长不能超过120分钟' })
          return
        }
        var estimatedTime = this.form.estimatedTime * 60 * 1000
        console.log(this.form)
        var params = {}
        if (this.showIndex === 1) {
          if (!this.form.imgKey) {
            this.$message({ type: 'warning', message: '请上传图片' })
            return
          }
          params = {
            imgKey: this.form.imgKey,
            shopPhone: this.form.shopPhone,
            announcement: this.form.announcement
          }
        } else if (this.showIndex === 2) {
          console.log(1)
          if (this.form.businessBeginTime === null || this.form.businessEndTime === null) {
            console.log(2)
            this.$message({ type: 'warning', message: '请选在配送时间段' })
            return
          }
          params = {
            startingPrice: this.form.startingPrice,
            postalPrice: this.form.postalPrice,
            businessBeginTime: this.form.businessBeginTime,
            businessEndTime: this.form.businessEndTime,
            estimatedTime: estimatedTime
          }
        } else if (this.showIndex === 3) {
          params = {
            bankName: this.bankInfo.bankName,
            cardNo: this.bankInfo.cardNo,
            cardUserName: this.bankInfo.cardUserName
          }
        }
        console.log(formName, 777)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.showIndex === 3) {
              store_bank(params).then(res => {
                console.log(res)
                this.$message({ type: 'success', message: '修改成功' })
                // this.$router.go(-1)
                this.dialogVisible = false
              })
            } else {
              store_change(params).then(res => {
                console.log(res)
                this.$message({ type: 'success', message: '修改成功' })
                // this.$router.go(-1)
                this.dialogVisible = false
                this.dialogVisible2 = false
                this.dialogVisible3 = false
              })
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      handleBack() {
        // this.$router.push({ name: 'worksData' })
      }
    },
    mounted() {
      this.getInfo()
    }
  }
</script>

<style src="./index.scss" lang="scss" scoped></style>
